<template>
  <div class="main">
    <div class="main-homework">
      <div class="main-homework-title">
        {{ title }}
      </div>
      <div v-for="(data, index) in dataArr" :key="index">
        <Choose :data="data" :indexNum="index" /><br />
      </div>
      <el-button type="primary" @Click="submit">提交</el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="得分情况" width="30%">
      <span>最终得分：{{ totalScore }}</span>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from "vue"
import {ElMessage} from "element-plus"
import {useRouter} from "vue-router"
import {Homework} from "../../api"
import {ChooseType} from "../../interface"
const router = useRouter()
const dataArr = ref()
const title = ref()
const dialogVisible = ref(false)
const totalScore = ref(0)
const state = ref(0)
onMounted(async () => {
  const {type, id} = router.currentRoute.value.query
  const res: {value: any} = {value: {}}
  type === "home"
    ? (res.value = await Homework.getHomeworkByJobId({homeworkId: Number(id)}))
    : (res.value = await Homework.getJobByStudentIdHomeworkId({
        studentId: 111,
        homeworkId: Number(id)
      }))
  dataArr.value = JSON.parse(res.value.data.homeworkData.homework_data)
  title.value = res.value.data.homeworkData.name
})
const submit = () => {
  if (state.value == 0) {
    totalScore.value = 0
    dataArr.value.forEach((item: ChooseType) => {
      console.log(item)
      item.answer == item.studentAnswer ? (totalScore.value += item.score!) : null
    })
    dialogVisible.value = true
    state.value = 1
  } else {
    ElMessage.error("已提交过，请勿重复提交")
  }
}
</script>
<style lang="scss" scoped>
.main {
  padding: 50px 200px 0;
  &-homework {
    width: 100%;
    border: 1px solid #ccc;
    padding: 20px;
    &-title {
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>
